<template>
  <div class="home-index">
    <!-- 引导页 -->
    <Welcome v-if="LandingPage" :curModule="curModule" v-model:LandingPage="LandingPage" />
    <!-- 首页控制台 -->
    <div v-else>
      <div class="home-index-tab">
        <div class="tabs">
          <el-tabs v-model="curModuleTab" class="tabs-ele" @tab-click="handleClick">
            <el-tab-pane v-for="(item, index) in moduleTabs" :key="index" :label="item.name" :name="item.id" :disabled="item.disabled"></el-tab-pane>
          </el-tabs>
          <!-- 最近访问 -->
          <div class="recently-visited-pop">
            <el-popover placement="bottom" :width="350" trigger="hover" @show="getRecentlyVisited">
              <template #reference>
                <span class="text">
                  <i class="iconfont">&#xe617;</i>
                  最近访问
                  <el-icon><ArrowDown /></el-icon>
                </span>
              </template>
              <div class="recently-visited-list">
                <div class="item" v-for="(item, index) in recentlyVisitedList" :key="index" @click="handleRecentlyVisitedClick(item)">
                  <div class="title">{{ item.title }}</div>
                  <div class="description" v-if="item.description">{{ item.description }}</div>
                </div>
                <div class="empty" v-if="recentlyVisitedList.length === 0">暂无访问记录</div>
              </div>
            </el-popover>
          </div>
        </div>
      </div>
      <div class="home-index-content">
        <div class="home-main">
          <ModuleList :curModule="curModule" />
        </div>
        <!-- 暂时隐藏，接口加了后，再显示 -->
        <div v-show="false" class="right-box">
          <div class="top">
            <!-- 通知 -->
            <div class="box-item noticeBar">
              <i class="iconfont">&#xe8b8;</i>
              <MyNoticeBar v-if="!baseInfoLoading" :lists="newsList"></MyNoticeBar>
            </div>
            <div v-for="val in plateData" :key="val.key">
              <!-- 资源预警 -->
              <div class="box-item" v-if="val.key === 'earlyWarning' && baseInfo.earlyWarning && val.checked">
                <h1 class="title">资源预警</h1>
                <div class="warning-box">
                  <div class="content-box on-warning">
                    <div class="label">
                      <div class="tip-box">
                        <span>正在报警</span>
                        <PopoverTip :content="'正在报警的数量是指当前因符合云监控中已设置的报警规则而产生的报警数量，通常代表您设置的监控指标异常。'"></PopoverTip>
                      </div>
                    </div>
                    <div class="content-value">
                      <div class="value">
                        <span class="num">{{ baseInfo.earlyWarning.onWarningNum }}</span>
                      </div>
                    </div>
                  </div>
                  <div class="content-box events">
                    <div class="label">
                      <div class="tip-box">
                        <span>事件概览</span>
                        <PopoverTip :content="'事件数量是云监控监测的云产品达到严重、警告级别的事件数量，包括云产品故障、运维以及业务异常方面的事件。'"></PopoverTip>
                      </div>
                      <el-select v-model="warningTimeValue" size="small" @change="warningTimeSeclect" style="width: 85px">
                        <el-option v-for="item in timesOptions" :key="item.value" :label="item.label" :value="item.value" />
                      </el-select>
                    </div>
                    <div class="content-value">
                      <div class="value">
                        <span class="num" :class="baseInfo.earlyWarning.dangerNum ? 'fail-score' : 'no-num'">
                          {{ baseInfo.earlyWarning.dangerNum }}
                        </span>
                        <span>严重</span>
                      </div>
                      <div class="value">
                        <span class="num" :class="baseInfo.earlyWarning.warningNum ? 'warning-score' : 'no-num'">{{ baseInfo.earlyWarning.warningNum }}</span>
                        <span>警告</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 安全告警 -->
              <div class="box-item" v-if="val.key === 'safeWarning' && baseInfo.safeWarning && val.checked">
                <h1 class="title">安全告警</h1>
                <div class="warning-box">
                  <!-- 安全评分 -->
                  <div class="content-box" :class="getScoreBgLevel(baseInfo.safeWarning.safeScore)">
                    <div class="label">
                      <div class="tip-box">
                        <span>安全评分</span>
                        <PopoverTip :content="'安全评分是根据您的资产安全状态进行的评分，满分 100 分，存在安全风险时会以扣分的形式进行预警。'"></PopoverTip>
                      </div>
                    </div>
                    <div class="content-value">
                      <div class="value">
                        <span class="num">
                          <span class="current-num" :class="getScoreLevel(baseInfo.safeWarning.safeScore)">
                            {{ baseInfo.safeWarning.safeScore }}
                          </span>
                          <span class="all-num">/100</span>
                        </span>
                      </div>
                    </div>
                  </div>
                  <!-- 告警 -->
                  <div class="content-box" :class="baseInfo.safeWarning.warningNum > 0 ? 'gj' : ''">
                    <div class="label">
                      <div class="tip-box">
                        <span>告警</span>
                      </div>
                    </div>
                    <div class="content-value">
                      <div class="value">
                        <span class="num" :class="baseInfo.safeWarning.warningNum ? 'warning-score' : ''">{{ baseInfo.safeWarning.warningNum }}</span>
                      </div>
                    </div>
                  </div>
                  <!-- 漏洞 -->
                  <div class="content-box" :class="baseInfo.safeWarning.bugNum > 0 ? 'ld' : ''">
                    <div class="label">
                      <div class="tip-box">
                        <span>漏洞</span>
                      </div>
                    </div>
                    <div class="content-value">
                      <div class="value">
                        <span class="num" :class="baseInfo.safeWarning.bugNum ? 'fail-score' : ''">{{ baseInfo.safeWarning.bugNum }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 事务中心 -->
              <!-- <div class="box-item" v-if="val.key === 'officeCenter' && baseInfo.officeCenter && val.checked">
                <h1 class="title">事务中心</h1>
                <div class="office-center">
                  <div class="office-item">
                    <p>我提交的审核</p>
                    <span :class="{'is-zero': baseInfo.officeCenter.myTodoAudit === 0}">{{baseInfo.officeCenter.mySubmitAudit}}</span>
                  </div>
                  <div class="office-item" @click="router.push({path: '/audit/contentAudit/myAudit'})">
                    <p>待我审核</p>
                    <span :class="{'is-zero': baseInfo.officeCenter.myTodoAudit === 0}">{{baseInfo.officeCenter.myTodoAudit}}</span>
                  </div>
                  <div class="office-item" @click="router.push({path: '/audit/contentAudit/MyRejection'})">
                    <p>待处理退稿</p>
                    <span :class="{'is-zero': baseInfo.officeCenter.myTodoRejection === 0}">{{baseInfo.officeCenter.myTodoRejection}}</span>
                  </div>
                </div>
              </div> -->
              <!-- java环境 -->
              <!-- <div class="box-item" v-if="val.key === 'javaEnvironment' && baseInfo.javaEnvironment && val.checked">
                <h1 class="title">JAVA环境</h1>
                <div class="description-box">
                  <div class="description" v-for="(son, sonIndex) in baseInfo.javaEnvironment" :key="sonIndex">
                    <div class="label">{{son.label}}</div>
                    <div class="value">{{son.value}}</div>
                  </div>
                </div>
              </div> -->
              <!-- 服务器环境 -->
              <!-- <div class="box-item" v-if="val.key === 'serverEnvironment' && baseInfo.serverEnvironment && val.checked">
                <h1 class="title">服务器环境</h1>
                <div class="description-box">
                  <div class="description" v-for="(son, sonIndex) in baseInfo.serverEnvironment" :key="sonIndex">
                    <div class="label">{{son.label}}</div>
                    <div class="value">{{son.value}}</div>
                  </div>
                </div>
              </div> -->
              <!-- 数字资产 -->
              <div class="box-item" v-if="val.key === 'digitalAsset' && baseInfo.digitalAsset && val.checked">
                <h1 class="title">数字资产</h1>
                <p style="font-size: 14px; margin-bottom: 5px">域名</p>
                <div class="digital-asset-box">
                  <div class="statistics">
                    <div class="statistic-item" v-for="(son, index) in baseInfo.digitalAsset.statistics" :key="index">
                      <span>{{ son.label }}</span>
                      <p>{{ son.value }}</p>
                    </div>
                  </div>
                  <div class="pending-domain">
                    <div class="domain-title domain-item">
                      <p>域名</p>
                      <p>过期时间</p>
                    </div>
                    <li class="domain-item" v-for="domain in baseInfo.digitalAsset.pendingDomain" :key="domain.id">
                      <p>{{ domain.domain }}</p>
                      <span class="time" :class="'time-' + domain.type">{{ domain.date }}</span>
                      <span class="btn">立即处理</span>
                    </li>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useStore } from 'vuex'
import { loginLog } from '@/api/logs'
import { getSubAppList } from '@/api/setting'
import { ArrowDown } from '@element-plus/icons-vue'
import ModuleList from '@/views/home/components/ModuleList.vue'
import Welcome from '@/views/home/components/Welcome.vue'
import { jumpRoute } from '@ruifox-cms/utils'

// 未跳过引导页w
// 第一次进入引导页
const LandingPage = ref(false)
const store = useStore()
const serverList = computed(() => store.getters.menus)
console.log('serverList', serverList.value)
const moduleTabs = ref([])
const curModuleTab = ref(0)
const initModuleTabs = async () => {
  let res = await getSubAppList()
  if (res.code === 20000) {
    res.data.forEach(item => {
      item.children = store.getters.menus.filter(menu => menu.moduleId === item.id)
    })
    moduleTabs.value = res.data.filter(item => item.children.length > 0)
    curModuleTab.value = moduleTabs.value[0].id
  }
}
initModuleTabs()

// 登录日志
const loginLogList = ref([])
const loginLogListLoading = ref(false)
const hanldeLoginLogSelectAll = async () => {
  loginLogListLoading.value = true
  let res = await loginLog({ currentPage: 1, pageSize: 10 })
  loginLogList.value = res.data.list
  loginLogListLoading.value = false
}
hanldeLoginLogSelectAll()

const handleClick = () => {
  console.log('curModuleTab.value', curModuleTab.value)
  let curModule = moduleTabs.value.find(item => item.id === curModuleTab.value)
  console.log('curModule', curModule)
}
const curModule = computed(() => {
  return moduleTabs.value.find(item => item.id === curModuleTab.value)
})

const baseInfo = ref({})
const newsList = ref([])
const warningTimeValue = ref(0)
const timesOptions = ref([
  { label: '近1日', value: 0 },
  { label: '近3日', value: 1 },
  { label: '近7日', value: 2 }
])
const baseInfoLoading = ref(false)
// 获取右侧基础数据
const handleIndexViewBaseInfo = async () => {
  baseInfoLoading.value = true
  // let res = await indexViewBaseInfo({type: warningTimeValue.value})
  let res = {
    data: {
      // 通知
      notice: '今日巡检，服务器无异常行为，安全态势正常！',
      //资源预警
      earlyWarning: {
        onWarningNum: 0, //正在报警
        dangerNum: 1, //严重数量
        warningNum: 1 // 警告数量
      },
      // 安全告警
      safeWarning: {
        safeScore: 94, //安全评分
        warningNum: 0, //警告数量
        bugNum: 0 //漏洞数量
      },
      // 事务中心
      officeCenter: {
        mySubmitAudit: 11, // 我提交的审核
        myTodoAudit: 1, // 待我审核
        myTodoRejection: 0 // 待处理退稿
      },
      javaEnvironment: [
        // java环境
        { label: 'JDK', value: '1.8' },
        { label: 'Mysql', value: '1.8' },
        { label: 'redis', value: '1.8' }
      ],
      serverEnvironment: [
        // 服务器环境
        { label: 'JDK', value: '1.8' },
        { label: 'Mysql', value: '1.8' },
        { label: 'redis', value: '1.8' }
      ],
      digitalAsset: {
        statistics: [
          { label: '已注册', value: 4 },
          { label: '使用中', value: 2 },
          { label: '即将过期', value: 1 },
          { label: '已过期', value: 1 }
        ],
        pendingDomain: [
          { id: 1, domain: 'foxhcs-alpha-web.foxtest.net', date: '2023-01-01', type: 1 }, //type: 1即将过期
          { id: 2, domain: 'foxhcs-alpha-web.foxtest.net', date: '2023-12-01', type: 2 } //type: 2已过期
        ]
      }
    }
  }
  baseInfo.value = res.data
  newsList.value = [res.data.notice]
  baseInfoLoading.value = false
}
handleIndexViewBaseInfo()
// 板块设置
const plateDataDefault = ref([
  { key: 'earlyWarning', name: '资源预警', checked: true },
  { key: 'safeWarning', name: '安全告警', checked: true },
  { key: 'officeCenter', name: '事务中心', checked: true },
  // {key: 'javaEnvironment',name: 'JAVA环境', checked: true},
  { key: 'serverEnvironment', name: '服务器环境', checked: true }
])
const warningTimeSeclect = () => {
  handleIndexViewBaseInfo()
}
const plateData = ref(localStorage.getItem('plate_data') ? JSON.parse(localStorage.getItem('plate_data')) : plateDataDefault.value)
// 安全评分等级
const getScoreLevel = score => {
  if (score > 0 && score < 60) {
    return 'fail-score'
  } else if (score >= 60 && score < 80) {
    return 'warning-score'
  } else if (score >= 80) {
    return 'success-score'
  }
}
// 安全评分等级背景色
const getScoreBgLevel = score => {
  if (score > 0 && score < 60) {
    return 'fail-bg-score'
  } else if (score >= 60 && score < 80) {
    return 'warning-bg-score'
  } else if (score >= 80) {
    return 'success-bg-score'
  }
}

const recentlyVisitedList = ref([])

const getRecentlyVisited = () => {
  const records = JSON.parse(localStorage.getItem('recently_visited') || '[]')
  recentlyVisitedList.value = records
}

getRecentlyVisited()

const handleRecentlyVisitedClick = item => {
  if (item.path) {
    jumpRoute(item.path)
  }
}
</script>

<style lang="scss" scoped>
.home-index {
  color: #666666;
  box-sizing: content-box;
  background-color: $homeBgColor;
  min-height: calc(100vh - 100px);
  .home-index-tab {
    position: relative;
    box-sizing: border-box;
    height: 44px;
    margin-top: 16px;
    .tabs,
    ::v-deep(.tabs) {
      width: 100%;
      height: 44px;
      margin: 0 auto;
      max-width: 1280px;
      box-sizing: content-box;
      position: relative;
      .tabs-ele {
        .el-tabs__item {
          padding-bottom: 10px;
        }
        .el-tabs__active-bar {
          height: 3px;
        }
        .el-tabs__nav.is-stretch {
          min-width: calc(66.7%);
        }
      }
      .recently-visited-pop {
        font-size: 12px;
        position: absolute;
        right: 10px;
        top: 1px;
        color: #333;
        cursor: pointer;
        .text {
          padding: 8px 20px;
          border-radius: 4px;
          display: flex;
          align-items: center;
          i.iconfont {
            margin-right: 2px;
          }
          .el-icon {
            transform: rotate(0);
            transition: all 0.3s;
            margin-left: 3px;
          }
          &:hover {
            background: $focusContent;
            .el-icon {
              transform: rotate(180deg);
            }
          }
        }
      }
    }
  }
  .home-index-content {
    height: 100%;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 24px auto;
    padding: 0 20px;
    box-sizing: content-box;
  }
  .right-box {
    width: 33.3%;
    height: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .top {
      box-sizing: border-box;
      padding-bottom: 20px;
      border-radius: 4px;
    }
    .box-item {
      @include nextCard;
      width: 100%;
      background-color: #fff;
      flex-shrink: 0;
      margin-right: 10px;
      padding: 15px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-bottom: 15px;

      .title {
        color: #666;
        margin-bottom: 10px;
        padding-left: 15px;
        position: relative;
        font-size: 18px;
        &::before {
          position: absolute;
          content: '';
          top: 50%;
          left: 0;
          transform: translateY(-50%);
          width: 4px;
          height: 60%;
          opacity: 0.7;
          background: $mainColor;
        }
      }
      .digital-asset-box {
        .statistics {
          display: flex;
          .statistic-item {
            width: 25%;
            display: flex;
            flex-direction: column;
            align-items: center;
            span {
              font-size: 12px;
              color: #aaaaaa;
            }
            p {
              font-size: 32px;
              font-weight: bold;
              line-height: 52px;
            }
            &:nth-child(3) {
              p {
                color: #ff9700;
              }
            }
            &:nth-child(4) {
              p {
                color: #ff5240;
              }
            }
          }
        }
        .pending-domain {
          background-color: #f8f8f8;
          .domain-item {
            height: 32px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
            padding: 0 10px;
            border-bottom: 1px solid #e4e4e4;
            span.time-1 {
              color: #ff9700;
            }
            span.time-2 {
              color: #ff5240;
            }
            span.btn {
              display: none;
              cursor: pointer;
              color: $mainColor;
            }
            &.domain-title {
              p {
                color: #aaaaaa;
              }
            }
            &:hover {
              background-color: $focusContent;
              .time {
                display: none;
              }
              .btn {
                display: block;
              }
            }
          }
        }
      }
    }
    .warning-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-direction: row;
      .content-box {
        height: 77px;
        box-sizing: border-box;
        padding: 10px 15px;
        border-radius: 4px;
        font-size: 14px;
        background: $homeBgColor;
        margin-right: 10px;
        width: 33%;
        cursor: pointer;
        border: 1px transparent solid;
        &:hover {
          border: 1px rgb(170, 170, 170, 0.4) solid;
          box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
        }
        .label {
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-direction: row;
          height: 25px;
          .tip-box {
            display: flex;
            span {
              margin-right: 3px;
            }
          }
          .el-select {
            height: initial;
            ::v-deep(.el-input__inner) {
              height: 24px;
            }
          }
        }
      }
      .on-warning {
        width: 35%;
        background: $homeBgColor;
      }
      .ld {
        &:hover {
          border: 1px $failColor solid;
        }
      }
      .gj {
        &:hover {
          border: 1px $warningColor solid;
        }
      }
      .events {
        width: calc(65% - 10px);
        background: #f8efef;
      }
      .content-value {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: row;
        margin-top: 10px;
        .value {
          margin-right: 14px;
          font-size: 16px;
          .num {
            margin-right: 8px;
            font-size: 18px;
            font-weight: 600;
            .current-num {
              color: inherit;
            }
            .all-num {
              font-size: 14px;
            }
          }
        }
      }
    }
    .noticeBar {
      padding: 5px 20px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-direction: row;
      .iconfont {
        margin-right: 7px;
        font-size: 16px;
        color: $warningColor;
      }
    }
  }
  .home-main {
    @include nextCard;
    // width: 66.7%;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background-color: #fff;
  }
}

// 响应式布局
@media screen and (min-width: 1440px) {
  .home-index {
    .home-index-tab .tabs {
      max-width: 1376px;
    }
    .home-index-content {
      max-width: 1376px;
    }
  }
}
@media screen and (min-width: 1920px) {
  .home-index {
    .home-index-tab .tabs {
      max-width: 1616px;
    }
    .home-index-content {
      max-width: 1616px;
    }
  }
}

@media screen and (max-width: 1124px) {
  .home-index {
    .home-index-content {
      flex-direction: column;
      .home-main {
        width: 100%;
      }
      .right-box {
        width: 100%;
      }
    }
  }
}
</style>

<style lang="scss">
.recently-visited-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;

  .item {
    width: calc((100% - 20px) / 2);
    padding: 8px 20px;
    box-sizing: border-box;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: $homeBgColor;
    cursor: pointer;
    flex-direction: column;

    .title {
      font-size: 14px;
      color: #333;
    }

    .description {
      font-size: 12px;
      color: #999;
      margin-top: 4px;
    }

    &:hover {
      background-color: $focusContent;
    }
  }

  .empty {
    width: 100%;
    text-align: center;
    color: #999;
    padding: 20px 0;
  }
}
</style>
